<template>
  <up-navbar bgColor="#fff">
    <template #left>
      <view></view>
    </template>
    <template #center>
      <view class="u-f-sxl">消息中心</view>
    </template>
    <template #right>
      <view class="tag flex">
        <up-icon name="chat" size="24rpx"></up-icon>
        与我有关
      </view>
    </template>
  </up-navbar>

  <!-- 固定在顶部的搜索框 -->
  <scroll-view style="height: 100vh" scroll-y="true" show-scrollbar="false" @scrolltolower="loadMore"
               lower-threshold="100">
    <!-- 内容区域 -->
    <view class="content-container">
      <view class="content-wrapper">
        <view class="flex-top p-c-15" style="box-sizing: border-box;border-bottom: 1rpx solid #f1f1f1;">
          <up-image shape="circle" src="/static/icon/common/notice.png" width="60rpx"
                    height="60rpx"></up-image>
          <view style="margin-left: 10rpx">
            <view class="p-c-15 flex-between" @click="toPath('/message/detail/detail?id=1')">
              <view>系统消息</view>
              <view class="flex">
                <u-badge :isDot="true"></u-badge>
                <up-icon name="arrow-right" size="25rpx"></up-icon>
              </view>
            </view>
            <view class="text-2 u-f-sl" style="line-height: 30rpx">
              你好，欢迎加入「阿斯蒂芬」，希望大家在阿斯蒂芬撒旦法阿斯蒂芬阿斯蒂芬aasdfasdfasdfsdfasdfdasfasdf阿斯顿发山东阿斯蒂芬
            </view>
            <view class="flex-between u-f-sm f-c-6" style="line-height: 40rpx;">
              <view>昨天 10:20</view>
              <view>系统消息</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <a-menu/>
</template>

<script setup>
import {toPath} from "@/util/router/router";
import {ref} from "vue";


const count = ref(10)

const loadMore = () => {
  count.value += 10
}
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";
/* 全局样式 */
page {
  background-color: #f7f7f7;
}

/* 固定搜索框样式 */
.fixed-search {
  position: sticky;
  z-index: 99;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  /* 多平台适配 */
  // #ifdef H5
  top: 44px; /* H5导航栏高度 */
  // #endif

  // #ifdef MP-WEIXIN || APP
  top: 130rpx; /* 小程序/APP导航栏高度 */
  // #endif
}

/* 内容区域样式 */
.content-container {
  height: calc(100vh - var(--total-fixed-height));
  overflow: hidden;
  // #ifdef H5
  margin-top: 88rpx; /* H5导航栏高度 */
  // #endif
  // #ifdef MP-WEIXIN || APP
  margin-top: 130rpx; /* 小程序/APP导航栏高度 */
  // #endif
  background-color: #f7f7f7;
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 20rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.content-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #f7f7f7;
  overflow: hidden; /* 新增：防止内容溢出 */
  box-shadow: 0 0 20rpx rgb(199, 199, 199);
}


/* 定义CSS变量用于高度计算 */
:root {
  // #ifdef H5
  --total-fixed-height: 44px+80rpx; /* H5导航栏+搜索框高度 */
  // #endif

  // #ifdef MP-WEIXIN || APP
  --total-fixed-height: 130rpx+80rpx; /* 小程序/APP导航栏+搜索框高度 */
  // #endif
}

.tag {
  font-size: 22rpx;
  color: #333;
  background: #f6f6f6;
  padding: 8rpx 15rpx;
  border-radius: 30rpx;
}
</style>